<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Form Validation</title>
        <meta name="msapplication-TileColor" content="#5bc0de"/>
        <meta name="msapplication-TileImage" content="assets/img/metis-tile.png"/>
        
        <link rel="stylesheet" href="assets/lib/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="assets/css/main.css"/>
        <link rel="stylesheet" href="assets/lib/Font-Awesome/css/font-awesome.css"/>

        <link rel="stylesheet" href="assets/css/theme.css">

        
        <link rel="stylesheet" href="assets/lib/validationengine/css/validationEngine.jquery.css">
        

        
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css">
        
        
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-1669764-16', 'onokumus.com');
  ga('send', 'pageview');

</script>

        <script src="assets/lib/modernizr-build.min.js"></script>
    </head>
    <body >
        <div id="wrap">

            <div id="top">
                <!-- .navbar -->
<nav class="navbar navbar-inverse navbar-static-top">
    <!-- Brand and toggle get grouped for better mobile display -->
    <header class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand"><img src="assets/img/logo.png" alt=""></a>
  </header>
    

    <div class="topnav">

        <div class="btn-toolbar">
            <div class="btn-group">
                <a data-placement="bottom" data-original-title="Show / Hide Sidebar" data-toggle="tooltip" class="btn btn-success btn-sm" id="changeSidebarPos">
                    <i class="fa fa-resize-horizontal"></i>
                </a>
            </div>
            <div class="btn-group">
                <a data-placement="bottom" data-original-title="E-mail" data-toggle="tooltip" class="btn btn-default btn-sm">
                    <i class="fa fa-envelope"></i>
                    <span class="label label-warning">5</span>
                </a>
                <a data-placement="bottom" data-original-title="Messages" href="#" data-toggle="tooltip" class="btn btn-default btn-sm">
                    <i class="fa fa-comments"></i>
                    <span class="label label-danger">4</span>
                </a>
            </div>
            <div class="btn-group">
                <a data-placement="bottom" data-original-title="Document" href="#" data-toggle="tooltip" class="btn btn-default btn-sm">
                    <i class="fa fa-file"></i>
                </a>
                <a data-toggle="modal" data-original-title="Help" data-placement="bottom" class="btn btn-default btn-sm" href="#helpModal">
                    <i class="fa fa-question"></i>
                </a>
            </div>
            <div class="btn-group">
                <a href="login.html" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
		  <i class="fa fa-power-off"></i>
                </a>
            </div>
        </div>


    </div>






    <!-- /.topnav -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <!-- .nav -->
        <ul class="nav navbar-nav">
            <li><a href="dashboard.html">Dashboard</a></li>
            <li><a href="table.html">Tables</a></li>
            <li><a href="file.html">File Manager</a></li>
            <li class='dropdown active'>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Form Elements <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="form-general.html">General</a></li>
                    <li><a href="form-validation.html">Validation</a></li>
                    <li><a href="form-wysiwyg.html">WYSIWYG</a></li>
                    <li><a href="form-wizard.html">Wizard &amp; File Upload</a></li>
                </ul>
            </li>
        </ul>
        <!-- /.nav -->
    </div>
</nav>
<!-- /.navbar -->

                <!-- header.head -->
                <header class="head">
                    <div class="search-bar">
                        <a data-original-title="Show/Hide Menu" data-placement="bottom" data-tooltip="tooltip" class="accordion-toggle btn btn-primary btn-sm visible-xs" data-toggle="collapse" href="#menu" id="menu-toggle">
                            <i class="fa fa-resize-full"></i>
                        </a>

                        <form class="main-search">
                            <div class="input-group">
                                <input type="text" class="input-small form-control" placeholder="Live Search ...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default btn-sm" type="button"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </form>

                    </div>
                    <!-- ."main-bar -->
                    <div class="main-bar">
                        <h3><i class="fa fa-filter"></i> Form Validation</h3>
                    </div>
                    <!-- /.main-bar -->
                </header>
                <!-- end header.head -->


            </div>
            <!-- /#top -->

            <div id="left">
                <div class="media user-media">
    <a class="user-link" href="">
        <img class="media-object img-thumbnail user-img" alt="User Picture" src="assets/img/user.gif">
        <span class="label label-danger user-label">16</span>
    </a>

    <div class="media-body">
        <h5 class="media-heading">Archie</h5>
        <ul class="list-unstyled user-info">
            <li><a href="">Administrator</a></li>
            <li>Last Access : <br>
                <small><i class="fa fa-calendar"></i> 16 Mar 16:32</small>
            </li>
        </ul>
    </div>
</div>
<!-- #menu -->
<ul id="menu" class="collapse">
    <li class="nav-header">Menu</li>
    <li class="nav-divider"></li>
    <li class="panel ">
        <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#dashboard-nav">
            <i class="fa fa-dashboard"></i> Dashboard
	    <span class="pull-right">
		<i class="fa fa-angle-left"></i>
            </span>
        </a>
        <ul class="collapse" id="dashboard-nav">
            <li class=""><a href="dashboard.html"><i class="fa fa-angle-right"></i>
                Default Style</a></li>
            <li class=""><a href="alterne.html"><i
                    class="fa fa-angle-right"></i> Alternative Style</a></li>
        </ul>
    </li>
    <li class="panel ">
        <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
            <i class="fa fa-tasks"></i> Components
	    <span class="pull-right">
		<i class="fa fa-angle-left"></i>
            </span>
        </a>
        <ul class="collapse" id="component-nav">
            <li class=""><a href="icon.html"><i class="fa fa-angle-right"></i> Icon </a>
            </li>
            <li class=""><a href="button.html"><i class="fa fa-angle-right"></i>
                Button</a></li>
            <li class=""><a href="progress.html"><i class="iconfa fa-angle-right"></i>
                Progress</a></li>
            <li class=""><a href="pricing.html"><i
                    class="fa fa-credit-card"></i> Pricing Table</a></li>
            <li class="">
	      <a href="bgimage.html"><i class="fa fa-angle-right"></i> Bg Image</a>
	    </li>
	    <li class="">
	      <a href="bgcolor.html"><i class="fa fa-angle-right"></i> Bg Color</a>
	    </li>
        </ul>
    </li>
    <li class="panel  active">
        <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle collapsed"
           data-target="#form-nav">
            <i class="fa fa-pencil"></i> Forms
	    <span class="pull-right">
		<i class="fa fa-angle-left"></i>
            </span>
        </a>
        <ul class="collapse in" id="form-nav">
            <li class=""><a href="form-general.html"><i
                    class="fa fa-angle-right"></i> General</a></li>
            <li class="active"><a href="form-validation.html"><i
                    class="fa fa-angle-right"></i> Validation</a></li>
            <li class=""><a href="form-wysiwyg.html"><i
                    class="fa fa-angle-right"></i> WYSIWYG</a></li>
            <li class=""><a href="form-wizard.html"><i
                    class="fa fa-angle-right"></i> Wizard &amp; File Upload</a></li>
        </ul>
    </li>
    <li><a href="table.html"><i class="fa fa-table"></i> Tables</a></li>
    <li><a href="file.html"><i class="fa fa-file"></i> File Manager</a>
    </li>
    <li><a href="typography.html"><i class="fa fa-font"></i> Typography</a>
    </li>
    <li><a href="maps.html"><i class="fa fa-map-marker"></i> Maps</a></li>
    <li><a href="chart.html"><i class="fa fa-bar-chart"></i> Charts</a></li>
    <li><a href="calendar.html"><i class="fa fa-calendar"></i>
        Calendar</a></li>
    <li class="panel">
        <a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#error-nav">
            <i class="fa fa-warning-sign"></i> Error Pages
	    <span class="pull-right">
		<i class="fa fa-angle-left"></i>
            </span>
        </a>
        <ul class="collapse" id="error-nav">
            <li><a href="403.html"><i class="fa fa-angle-right"></i> 403</a></li>
            <li><a href="404.html"><i class="fa fa-angle-right"></i> 404</a></li>
            <li><a href="405.html"><i class="fa fa-angle-right"></i> 405</a></li>
            <li><a href="500.html"><i class="fa fa-angle-right"></i> 500</a></li>
            <li><a href="503.html"><i class="fa fa-angle-right"></i> 503</a></li>
            <li><a href="offline.html"><i class="fa fa-angle-right"></i> offline</a></li>
            <li><a href="countdown.html"><i class="fa fa-angle-right"></i> Under Construction</a></li>
        </ul>
    </li>
    <li><a href="grid.html"><i class="fa fa-columns"></i> Grid</a></li>
    <li><a href="blank.html"><i class="fa fa-square-o"></i> Blank
        Page</a></li>
    <li class="nav-divider"></li>
    <li><a href="login.html"><i class="fa fa-sign-in"></i> Login Page</a></li>
</ul>
<!-- /#menu -->
            </div>
            <!-- /#left -->

            <div id="content">
                <div class="outer">
                    <div class="inner">
                        
<style>
    .form-control.col-lg-6 {
        width: 50% !important;
    }
</style>
<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header class="dark">
                <div class="icons"><i class="fa fa-ok"></i></div>
                <h5>Popup Validation</h5>
                <div class="toolbar">
                    <ul class="nav">
                        <li>
                            <div class="btn-group">
                                <a class="accordion-toggle btn btn-xs minimize-box" data-toggle="collapse"
                                   href="#collapse2">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <button class="btn btn-xs btn-danger close-box"><i class="fa fa-remove"></i></button>
                            </div>
                        </li>
                    </ul>
                </div>

            </header>
            <div id="collapse2" class="body collapse in">
                <form class="form-horizontal" id="popup-validation">

                    <div class="form-group">
                        <label class="control-label col-lg-4">Required</label>
                        <div class="col-lg-4">
                            <input type="text" class="validate[required] form-control" name="req" id="req">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Select</label>
                        <div class="col-lg-4">
                            <select name="sport" id="sport" class="validate[required] form-control">
                                <option value="">Choose a sport</option>
                                <option value="option1">Tennis</option>
                                <option value="option2">Football</option>
                                <option value="option3">Golf</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Multiple Select</label>

                        <div class="col-lg-4">
                            <select name="sport2" id="sport2" multiple class="validate[required] form-control">
                                <option value="">Choose a sport</option>
                                <option value="option1">Tennis</option>
                                <option value="option2">Football</option>
                                <option value="option3">Golf</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Url</label>

                        <div class=" col-lg-4">
                            <input value="http://" class="validate[required,custom[url]] form-control" type="text"
                                   name="url1" id="url1"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">E-mail</label>

                        <div class=" col-lg-4">
                            <input class="validate[required,custom[email]] form-control" type="text" name="email1"
                                   id="email1"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Password</label>

                        <div class=" col-lg-4">
                            <input class="validate[required] form-control" type="password" name="pass1" id="pass1"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Confirm Password</label>

                        <div class=" col-lg-4">
                            <input class="validate[required,equals[pass1]] form-control" type="password" name="pass2"
                                   id="pass2"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Minimum field size (6)</label>

                        <div class=" col-lg-4">
                            <input value="" class="validate[required,minSize[6]] form-control" type="text" name="minsize1"
                                   id="minsize1"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Maximum field size, optional</label>

                        <div class=" col-lg-4">
                            <input value="0123456789" class="validate[optional,maxSize[6]] form-control" type="text"
                                   name="maxsize1" id="maxsize1"/>
                            <span class="help-block">note that the field is optional - it won't fail if it has no value</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Number</label>

                        <div class=" col-lg-4">
                            <input value="-33.87a" class="validate[required,custom[number]] form-control" type="text"
                                   name="numbe2r" id="number2"/>
                            <span class="help-block">a signed floating number, ie: -3849.354, 38.00, 38, .77</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">IP</label>

                        <div class=" col-lg-4">
                            <input value="192.168.3." class="validate[required,custom[ipv4]] form-control" type="text"
                                   name="ip" id="ip"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Date</label>

                        <div class=" col-lg-4">
                            <input value="201-12-01" class="validate[required,custom[date]] form-control" type="text"
                                   name="date3" id="date3"/>
                            <span class="help-block">ISO 8601 dates only YYYY-mm-dd</span>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="control-label col-lg-4">Date Earlier</label>

                        <div class=" col-lg-4">
                            <input value="2012/12/16" class="validate[custom[date],past[2012/09/13]] form-control"
                                   type="text" name="past" id="past"/>
                            <span class="help-block">Please enter a date ealier than 2012/09/13</span>
                        </div>
                    </div>

                    <div class="form-actions no-margin-bottom">
                        <input type="submit" value="Validate" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-th-large"></i></div>
                <h5>Block Validation</h5>
                <div class="toolbar">
                    <ul class="nav">
                        <li>
                            <div class="btn-group">
                                <a class="accordion-toggle btn btn-xs minimize-box" data-toggle="collapse"
                                   href="#collapseOne">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <button class="btn btn-xs btn-danger close-box">
                                    <i class="fa fa-remove"></i>
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>

            </header>
            <div id="collapseOne" class="accordion-body collapse in body">
                <form action="#" class="form-horizontal" id="block-validate">

                    <div class="form-group">
                        <label class="control-label col-lg-4">Required</label>
                        <div class="col-lg-4">
                            <input type="text" id="required2" name="required2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">E-mail</label>

                        <div class="col-lg-4">
                            <input type="email" id="email2" name="email2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Password</label>

                        <div class="col-lg-4">
                            <input type="password" id="password2" name="password2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Confirm Password</label>

                        <div class="col-lg-4">
                            <input type="password" id="confirm_password2" name="confirm_password2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Date</label>

                        <div class="col-lg-4">
                            <input type="date" id="date2" name="date2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Url</label>

                        <div class="col-lg-4">
                            <input type="url" id="url2" name="url2" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Digits Only</label>

                        <div class="col-lg-4">
                            <input type="text" id="digits" name="digits" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Range [6,16]</label>

                        <div class="col-lg-4">
                            <input type="text" id="range" name="range" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-lg-4">Please agree to our policy</label>

                        <div class="col-lg-4">
                            <input type="checkbox" id="agree2" name="agree2" class="form-control">
                        </div>
                    </div>
                    <div class="form-actions no-margin-bottom">
                        <input type="submit" value="Validate" class="btn btn-primary">
                    </div>

                </form>
            </div>
        </div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->


<div class="row">
    <div class="col-lg-12">
        <div class="box">
            <header>
                <div class="icons"><i class="fa fa-ok"></i></div>
                <h5>Inline Validation</h5>
                <div class="toolbar">
                    <ul class="nav">
                        <li>
                            <div class="btn-group">
                                <a class="accordion-toggle btn btn-xs minimize-box" data-toggle="collapse"
                                   href="#collapse3">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <button class="btn btn-xs btn-danger close-box"><i class="fa fa-remove"></i></button>
                            </div>
                        </li>
                    </ul>
                </div>

            </header>
            <div id="collapse3" class="accordion-body collapse in body">
                <form action="#" class="form-horizontal" id="inline-validate">
                    <div class="form-group">
                        <label class="control-label col-lg-4">Required</label>

                        <div class="col-lg-8">
                            <input type="text" id="required" name="required" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">E-mail</label>

                        <div class="col-lg-8">
                            <input type="email" id="email" name="email" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Password</label>

                        <div class="col-lg-8">
                            <input type="password" id="password" name="password" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Confirm Password</label>

                        <div class="col-lg-8">
                            <input type="password" id="confirm_password" name="confirm_password" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Date</label>

                        <div class="col-lg-8">
                            <input type="date" id="date" name="date" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Url</label>

                        <div class="col-lg-8">
                            <input type="url" id="url" name="url" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Please agree to our policy</label>

                        <div class="col-lg-8">
                            <input type="checkbox" id="agree" name="agree" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Minimum 3 Chars</label>

                        <div class="col-lg-8">
                            <input type="text" id="minsize" name="minsize" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Maximum 6 Chars</label>

                        <div class="col-lg-8">
                            <input type="text" id="maxsize" name="maxsize" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Minimum 3 </label>

                        <div class="col-lg-8">
                            <input type="text" id="minNum" name="minNum" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-4">Maximum 16 </label>

                        <div class="col-lg-8">
                            <input type="text" id="maxNum" name="maxNum" class="form-control col-lg-6">
                        </div>
                    </div>
                    <div class="form-actions">
                        <input type="submit" value="Validate" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
                    </div>
                    <!-- end .inner -->
                </div>
                <!-- end .outer -->
            </div>
            <!-- end #content -->

            

        </div>
        <!-- /#wrap -->


        <div id="footer">
            <p>2013 &copy; Metis Admin</p>
        </div>


        <!-- #helpModal -->        
        <div id="helpModal" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 class="modal-title">Modal title</h4>
	      </div>
	      <div class="modal-body">
		<p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
	      </div>
	      <div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->        
        <!-- /#helpModal -->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="assets/lib/jquery.min.js"><\/script>')</script> 




        <script src="assets/lib/bootstrap/js/bootstrap.js"></script>





        <script type="text/javascript" src="assets/js/style-switcher.js"></script>


        
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        

        
        <script src="assets/lib/validationengine/js/jquery.validationEngine.js"></script>
<script src="assets/lib/validationengine/js/languages/jquery.validationEngine-en.js"></script>
    <script src="assets/lib/validationengine/js/languages/jquery.validationEngine-vi.js"
        type="text/javascript"></script>
<script src="assets/lib/jquery-validation-1.11.1/dist/jquery.validate.min.js"></script>
<script src="assets/lib/jquery-validation-1.11.1/localization/messages_ja.js"></script>
        

        <script src="assets/js/main.js"></script>

        
        <script>
            $(function() { formValidation(); });
        </script>
        

    </body>
</html>
